<template>
	<view class="index">

		<!--搜索框-->
		<view class="search" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<navagationBar>
				<template>
					<view class="navbar">
						<view class="navbar-search" @click="handleCity">
							<uni-icons type="location-filled" size="20"></uni-icons>
							<text>{{ cityName }}</text>
						</view>
						<view class="navbar-input" @click="handleSearch">
							<u-search placeholder="请输入商品或服务" :height="getSystemInfo.menuHeight * 2" v-model="value"
								:showAction="false" bgColor="#F3F3F3" placeholderColor="rgba(#000000, .26)" disabled>
							</u-search>
						</view>
					</view>
				</template>
			</navagationBar>
		</view>

		<view class="content" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
      
			<!-- 万元抽奖提醒 -->
      <homeLottery v-if="showHomeLottery" @updateLottery="updateLottery"></homeLottery>
      
			<!--认证-->
			<view class="car">
				<template v-if="!isAuth">
          <view class="car-image">
            <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/default_car.png"></image>
          </view>
					<view class="car-text" @click="handleCar">
						<text>车辆认证 立享特权</text>
						<text>享购胎有礼、万元抽奖卡友福利</text>
					</view>
					<view class="car-button width1" @click="handleCar">
						<button type="warn">立即认证</button>
					</view>
				</template>

				<template v-else>
					<view class="car-info" @click="handleCar">
						<image v-if="userInfo.userCarInfo.brandModel"
							:src="userInfo.userCarInfo.brandModelLogo?userInfo.userCarInfo.brandModelLogo:'@/static/ic_track.png'">
						</image>
						<view class="car-info-num">
							<text class="car-info-num-name">{{ userInfo.userCarInfo.brandModel || '请选择品牌车型 >' }}</text>
							<view class="car-info-num-number">
								<view class="carnum">
									<view>{{ userInfo.userCarInfo.plateNum.slice(0,2) }}</view>
									<view>
										{{ userInfo.userCarInfo.plateNum.slice(2,userInfo.userCarInfo.plateNum.length) }}
									</view>
								</view>
								<u-tag class="tag" :text="userInfo.userMember.name" type="warning" plain plainFill
									size="mini" bg-color="#FFE9C1" color="#E48900"
									icon="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/rzhy.png">
								</u-tag>
							</view>
						</view>
					</view>
					<view v-if="installList.length" class="car-service">
						<swiper class="swiper-box" circular :indicator-dots="false" :autoplay="true" interval="10000"
							duration="1000" vertical>
							<swiper-item v-for="item in installList" :key="item.key" @tap.stop="goInstallDetail">
								<text class="car-service-text"
									v-if="item.isEpireTime">换{{ item.tipsType == 1?'轮':'胎'}}待完成</text>
								<text class="car-service-text" v-else>预计换{{ item.tipsType == 1?'轮':'胎'}}时间</text>
								<template v-if="item.isEpireTime">
									<view class="car-service-time car-service-time-active">
										已超{{item.time}}天，请尽快处理!
									</view>
								</template>
								<template v-else>
									<view class="car-service-time" v-if="item.time&&item.time>7">
										{{ item.replaceTime }}
									</view>
									<view class="car-service-time car-service-time-active" v-else-if="item.time">
										还剩{{ item.time}}天</view>
								</template>
								<!-- 							<view class="car-service-time car-service-time-active" v-else-if="item.time[1]">
									还剩{{ item.time[1] }}小时</view>
								<view class="car-service-time car-service-time-active" v-else-if="item.time[2]">
									还剩{{ item.time[2] }}分钟</view> -->
							</swiper-item>
						</swiper>

					</view>
					<!-- 				<view v-else class="car-button">
						<button type="warn">完善车辆信息</button>
					</view> -->
				</template>
			</view>
			<view class="card-friends">
				<view class="card-img">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/sbky.png">
					</image>
				</view>
				<view class="card-swiper" @click="goCardFriends">
					<swiper class="swiper-box" circular :indicator-dots="false" :autoplay="true"
						:interval="RealTimeRecording.length==1?3000:5000" duration="1000" vertical>
						<swiper-item v-for="item in RealTimeRecording" :key="item.key">
							<view class="swiper-item-box">
								<image
									:src="item.headImgUrl?item.headImgUrl:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'">
								</image>
								<view class="msg-info">
									<view class="info">
										{{ item.content }}
									</view>
									<view class="time" v-if="item.time[0]">{{ item.time[0] }}天前</view>
									<view class="time" v-else-if="item.time[1]">{{ item.time[1] }}小时前</view>
									<view class="time" v-else-if="item.time[2]">{{ item.time[2] }}分钟前</view>
									<view class="time" v-else="item.time[3]">{{ item.time[3] }}秒前</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="middle-banner">
				<view class="video-banner" @click="goVideoPage">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/ky-banner.png"
						mode=""></image>
				</view>
				<view class="ky-banner" @click="goCareCenter">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/video-banner.png"
						mode=""></image>
				</view>
			</view>
			<view class="coupon-integral">
				<view class="integral-box" @click="goIntegralDetail">
					<view class="bg">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/integral-bg.png">
						</image>
					</view>
					<view class="title">
						<text class="bd">{{ totalNotUsed }}</text>积分
					</view>
					<view class="btn">去兑换</view>
				</view>
				<view class="coupon-box" @click="goCouponDetail">
					<view class="bg">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/coupon-bg.png">
						</image>
					</view>
					<view class="title">
						<text class="bd">{{ totalCoupon }}张</text>优惠券
					</view>
					<view class="btn">去查看</view>
				</view>
			</view>

			<!--金刚区-->
			<view class="func">
				<swiper class="func-swiper-box" :indicator-dots="false" :autoplay="false" duration="1000"
					:display-multiple-items="colList.length > 4 ? 4: colList.length">
					<swiper-item v-for="item in colList" :key="item.id" class="func-swiper-item">
						<view class="func-info" @click="handleFunc(item)">
							<image :src="item.icon"></image>
							<view class="title">{{ item.name }}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!--轮播-->
			<view class="img" v-if="imgList.length > 0">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="1000">
					<swiper-item v-for="item of imgList">
						<view class="img-src">
							<image :src="item.adImage" @click="handleImg(item)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!--精选推荐-->
			<view class="product">
				<view class="product-divider">
					<u-divider text="精选推荐" :textSize="32" textColor="#000000"></u-divider>
				</view>
				<view class="product-list">
					<template v-for="(item, index) in lists">
						<view class="product-item" @click="goGoodsDetail(item.jfcode)">
               <view class="product-image">
                <image v-if="item.imgURL" :src="item.imgURL" style="height:auto;aspect-ratio: 1/1;">
                </image>
                <image v-else src="@/static/goods_default.png" style="height:auto;aspect-ratio: 1/1;">
                <image class="bage" :src="handleBageDisplay(item.promotionLabel)"></image>
                <view class="act" v-if="item.buyPromotion && item.buyPromotion.buyPromotionList && item.buyPromotion.buyPromotionList.length">
                  <view class="act-wrapper">
                    <view class="act-left">
                      满<text class="act-left-text">{{item.buyPromotion.buyNum}}</text>条
                    </view>
                    <view class="act-right">
						<template v-if="item.buyPromotion.buyPromotionList.length === 1">
						  <text v-if="item.buyPromotion.buyPromotionList[0].code === 'BUY_GIFT'">享赠品</text>
						  <text v-else-if="item.buyPromotion.buyPromotionList[0].code === 'RAFFLE'">享抽奖</text>
						</template>
						<text v-else>享赠品和抽奖</text>
                    </view>
                  </view>
                  </view>
               </view>
							<view class="product-info">
								<view class="product-info-title">
									<text>{{ item.name }}</text>
								</view>
								<view class="product-info-tagList" v-if="item.tagList && item.tagList.length">
									<view class="product-info-tagList-item" v-for="tag in item.tagList" :key="tag.id">
										{{ tag.name }}
									</view>
								</view>
								<view class="product-info-price">
                  <view class="price-wrapper" v-if="!item.useCouponPrice">
                    <text class="new"><text class="money">¥</text>{{ item.discountShowPrice }}</text>
                  </view>
                  <view class="price-wrapper" v-else>
                    <text class="new-title">券后价</text>
                    <text class="new"><text class="money">¥</text>{{ item.useCouponPrice }}</text>
                  </view>
									<text class="old">¥{{ item.sellPrice }}</text>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>

			<uni-load-more :status="status" :content-text="loadMoreText" v-if="loadVisible" />

		</view>

		<view class="fab">
			<image src="@/static/shop.png" @click="handleShop"></image>
		</view>

		<!--非首次登录并且未认证-->
		<u-modal :show="show" title="认证车辆 立享特权" :showCancelButton="true" cancelText="再等等" confirmText="去认证"
			confirmColor="#CF1A1B" content='您尚未车辆认证，认证立享购胎有礼、万元抽奖、卡友关爱基金等卡友福利' @confirm="handleCar"
			@cancel="show = false">
		</u-modal>

		<!--首次登录-->
		<u-modal :show="first" title="恭喜你，获得新人大礼包!" :showCancelButton="true" cancelText="取消" confirmText="去认证"
			confirmColor="#CF1A1B" @confirm="handleCar" @cancel="first = false">
			<view class="slot-content">
				现在车辆认证，还能享受<text style="color: #CF1A1B;">购胎有礼、万元抽奖、卡友关爱基金</text>等更多卡友福利!!!
			</view>
		</u-modal>
		<!-- 首次进入奖品 -->
		<u-popup :show="psizeShow" @close="close" @open="open" mode="center" zIndex="10080">
			<view class="psize-pop-content">
				<view class="bg">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/prizepop.jpg">
					</image>
				</view>
				<view class="title">恭喜用户134xxxx0907获得万元大奖</view>
				<view class="close">
					<u-icon name="close-circle" size="45" color="#fff" @click="psizeShow=false"></u-icon>
				</view>
			</view>
		</u-popup>
		<!-- 广告图片、视频弹窗 -->
		<u-popup :show="adShow" mode="center" zIndex="10079" overlayOpacity="0.2" :safeAreaInsetBottom="false" :bgColor="adInfo[0].adType === 1?'transparent':'#fff'">
			<view class="video-pop-content">
				<view v-if="adInfo[0].adType === 2">
					<video class="video" :src="adInfo[0].videoUrl" ref="adVideoRef" controls object-fit="contain" :show-center-play-btn="false" 
            :show-play-btn="false" :show-fullscreen-btn="false" autoplay></video>
				</view>
        <view v-else>
					<image class="image" :src="adInfo[0].adImage" mode="scaleToFill"></image>
				</view>
				<view class="close">
					<u-icon name="close-circle" size="45" color="#fff" @click="closeAdPopup"></u-icon>
				</view>
			</view>
		</u-popup>
		<!-- 优惠卷弹窗 -->
		<u-popup :show="couponShow" mode="center" zIndex="10078">
			<view class="coupon-pop-content">
				<view class="coupon-list-header">
					<view class="title1"> 恭喜您！获取的18张优惠券</view>
					<view class="title2"> 优惠券已放入“我的-优惠券”</view>
				</view>
				<view class="list">
					<view class="list-item">
						<view class="item-left">
							<view class="count">￥100</view>
							<view class="tip">每个轮胎限用一张</view>
						</view>
						<view class="item-right">
							<view class="name">全品类通用卷</view>
							<view class="title">
								<text class="label">适用范围</text>全部轮胎
							</view>
							<view class="title">
								<text class="label">有效期</text>2022-05-12
							</view>
							<view class="use">去使用</view>
						</view>
					</view>
				</view>
				<view class="close">
					<u-icon name="close-circle" size="45" color="#fff" @click="couponShow=false"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import navagationBar from '@/components/navigationBar.vue'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	import homeLottery from '@/components/homeLottery.vue'
  

	export default {
		components: {
			navagationBar,
      homeLottery
		},
		data() {
			return {
				loadMoreText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
				systemBarHeight: 0, // 系统状态栏的高度
				cityName: '',
				value: '',
				imgList: [],
				colList: [],
				lists: [],
				page: 1,
				size: 6,
				total: 0,
				status: 'more',
				loadVisible: false,
				isAuth: false, // 是否认证
				isComplete: false, // 是否完善车辆信息
				show: false,
				first: false,
				userInfo: {}, // 用户信息
				totalNotUsed: 0,
				totalCoupon: 0,
				fristGoDetail: true,
				RealTimeRecording: [],
				installList: [],
				psizeShow: false,
				couponShow: false,
				adShow: false,
        adInfo: {},
        showHomeLottery: true
			}
		},
		computed: {
			...mapGetters('global', ['getSystemInfo', 'getLocation', 'getTabBarIndex']),
			// ...mapState('user', ['userInfo']),
			// ...mapGetters('user', ['getUserInfo']),
		},
		watch: {
			// 监听点击的tabBar
			// getTabBarIndex(getTabBarIndex){
			// 	if(getTabBarIndex === 0){
			// 		this.init()
			// 	}
			// }
		},
		onLoad() {
			this.init()
      this.getImgVideoList()
			// this.getSysteminfo();

			uni.$on('refreshIndex', (data) => {
				this.reset()
				
			})

			// 商品失效
			uni.$on('loseGoods', () => {
				this.reset()
			})

			// uni.hideTabBar()
			// uni.showTabBar();
		},
		onShow() {
			this.refreshUserInfo()
			this.getNowCity()
		},
		onPullDownRefresh() {
			this.reset()
		},
		onReachBottom() {
			// if(this.lists.length >= this.total) {
			// 	this.status = 'noMore'
			// 	return
			// }
			if (this.status === 'noMore') {
				return
			}
			this.loadVisible = true
			this.status = 'loading'
			this.page++
			this.getGoodsList()
		},
		methods: {
			...mapMutations('global', ['setNowLocation', 'getNowLocation', 'setLocation']),
			...mapActions('user', ['refreshUserInfo']),
			reset() {
				this.imgList = []
				this.lists = []
				this.userInfo = {}
				this.loadVisible = true
				this.status = 'more'
				this.page = 1
				this.init()
			},
      
      handleBageDisplay(data) {
        if(!data.length) {
          return false
        }
        const hasA = data.some((item) => item.code === "DISCOUNT")
        const hasB = data.some((item) => item.code === "POINT")
        
        if (hasA && hasB) {
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/goods_discount_point.png" 
        } else if (hasA) {
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/goods_discount.png" 
        } else if (hasB) {
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/goods_point.png"; 
        } else {
          return ""
        }
      },
      
      // 是否展示抽奖倒计时
      updateLottery(val) {
        this.showHomeLottery = val
      },
      
      // 获取弹框广告(视频/图片)
      async getImgVideoList() {
        const adRes = await this.$request({
      		method: 'GET',
      		url: `/marketing-center/ad/list-by-position?positionCode=AD20230222003`,
      	})
        this.adInfo = adRes.datas
        if(!this.adInfo.length) {
          return false
        }
        let endTime = this.adInfo[0].endTime
        if(endTime) {
          if(new Date().getTime() > new Date(endTime).getTime()) { //广告过期
            this.adShow = false
          } else {
            this.adShow = true
          }
        }
        if(this.adInfo[0].adImage === '' && this.adInfo[0].videoUr === '') {
          this.adShow = false
        } else {
          this.adShow = true
        }
      },
      
			//设置等待时间
			formatTime(startTime, endTime) {
				var date1 = startTime ? new Date(startTime.replace(/-/g, '/')).getTime() : new Date().getTime()
				var date2 = endTime ? new Date(endTime.replace(/-/g, '/')).getTime() : new Date().getTime();
				var date3 = date2 - date1;
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				if (days < 0) {
					days = days * (-1)
				}
				var leave1 = date3 % (24 * 3600 * 1000);
				var hours = Math.floor(leave1 / (3600 * 1000));
				var leave2 = leave1 % (3600 * 1000);
				var minutes = Math.floor(leave2 / (60 * 1000));
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				return [days, hours, minutes, seconds]
			},
			//计算相差天数
			getDifferenceTime(startTime, endTime) {
				let year = new Date().getFullYear()
				let month = new Date().getMonth() + 1
				let day = new Date().getDate()
				let nowDate = year + '/' + (month > 9 ? month : '0' + month) + '/' + (day > 9 ? day : '0' + day)
				var startTime = startTime ? new Date(startTime.replace(/-/g, '/')) : nowDate
				var endTime = endTime ? new Date(endTime.replace(/-/g, '/')) : nowDate;
				var oDate1, oDate2, iDays;
				oDate1 = new Date(startTime);
				oDate2 = new Date(endTime);
				iDays = parseInt(Math.abs(oDate2 - oDate1) / 1000 / 60 / 60 / 24);
				return iDays
			},
			async init(flag) {
				uni.showLoading({
					title: '加载中...'
				})
				this.lists = []
				this.userInfo = uni.getStorageSync('userInfo') || {}
				console.log('this.userInfo', this.userInfo);
				this.isAuth = this.userInfo.userCarInfo
				this.isComplete = this.isAuth && !this.userInfo.userCarInfo.brandModel
				let fristIntoIndex = uni.getStorageSync('fristIntoIndex')||''
				if (!fristIntoIndex) {
					uni.setStorageSync('fristIntoIndex', 'no')
					if (this.userInfo&&this.userInfo.firstLogin === 'Y') {
						this.first = true
					} else {
						this.show = this.userInfo.id && !this.isAuth
					}
				}
				this.getImgList() 
				this.getGoodsList()
        this.getColList()
         
				//获取中奖用户		
				const specialPrize = await this.$request({
					method: 'get',
					url: '/marketing-center/raffleActivityBatchEntity/getSpecialPrize',
				})
				//获取是否有推送优惠券
				const couponData = await this.$request({
					method: 'GET',
					url: '/marketing-center/distribution/app/pushList',
				})

				//获取积分数据
				try {
					//积分
					const res = await this.$request({
						url: '/marketing-center/integralRuleDetails/getUserIntegral',
						data: {
							pageSize: 10,
							pageNum: 1,
							userId: this.userInfo.id
						}
					})
					this.totalNotUsed = res.datas.notUsed || '0'
				} catch (e) {
					console.log('获取积分信息失败!')
					this.totalNotUsed = '0'
				}
				//获取优惠券数据
				try {
					//优惠券
					const res = await this.$request({
						url: '/marketing-center/distribution/listByAPP',
						data: {
							couponStatusList: ["0"],
							pageSize: 10000,
							pageNum: 1,
							userId: this.userInfo.id
						}
					})
					this.totalCoupon = res.datas.count || '0'
				} catch (e) {
					console.log('获取优惠券消息失败!')
					this.totalCoupon = '0'
				}
				//获取是否有待付款的道路救援订单
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/roadRescueingList',
						data: {
							userId: this.userInfo.id
						}
					})
					if (res.datas.length && this.fristGoDetail && res.datas[0].state == 4) {
						this.fristGoDetail = false
						uni.navigateTo({
							url: `/rescuePack/rescueStatusDetail/index?id=${res.datas[0].id}`
						})
					}
				} catch (e) {}
				//获取身边卡友数据
				try {
					const res = await this.$request({
						url: `/terminal-serve-center/carOwnerBehavior/list?pageSize=20&pageNum=1&userId=${this.userInfo.id}`,
						method: 'get'
					})
					res.datas.data.forEach(item => {
						item.key = new Date().getTime()
						item.time = this.formatTime(item.createdTime)
					})
					this.RealTimeRecording = res.datas.data
				} catch (e) {}
				//获取是否有换轮订单
				try {
					const res = await this.$request({
						url: `/order-center/app/install-confirm/install/tips?userId=${this.userInfo.id}`,
						method: 'get'
					})
					let year = new Date().getFullYear()
					let month = new Date().getMonth() + 1
					let day = new Date().getDate()
					let nowDate = year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day)
					res.datas.forEach(item => {
						item.key = new Date().getTime()
						if (new Date(nowDate).getTime() > new Date(item.replaceTime).getTime()) {
							item.isEpireTime = true
							item.time = this.getDifferenceTime(item.replaceTime, null)
						} else {
							item.isEpireTime = false
							item.time = this.getDifferenceTime(null, item.replaceTime) + 1
						}

					})
					this.installList = res.datas
				} catch (e) {}
			},
			//时间计算
			// 获取系统栏高度
			getSysteminfo() {
				let res = uni.getMenuButtonBoundingClientRect()
				this.systemBarHeight = res.top - 4
			},
			// 获取当前位置
			getNowAddress() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: res => {
						const {
							longitude,
							latitude
						} = res
						this.reverseAddress(longitude, latitude)
					},
					fail: res => {
						// console.log('fail', res);
					}
				});
			},
			// 调用腾讯SDK获取当前定位城市信息
			reverseAddress(longitude, latitude) {
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})

				qqmapsdk.reverseGeocoder({
					// location: {
					// 	longitude,
					// 	latitude
					// },
					success: (res) => {
						const {
							city: cityName, province
						} = res.result.ad_info
						const {
							location
						} = res.result
						console.log('location', res);
						this.setNowLocation({
							cityName,
							longitude: location.lng,
							latitude: location.lat,
							province
						})

						this.setLocation({
							cityName
						})

						this.cityName = cityName
					},
					fail: (error) => {
						// console.error('error', error);
					},
				})
			},
			async getNowCity() {
				const {
					cityName,
					lng,
					lat
				} = this.getLocation
				if (cityName) {
					this.cityName = cityName
				} else {
					await this.getNowAddress()
				}
			},
			async getImgList() {
				const swiperRes = await this.$request({
					method: 'GET',
					url: `/marketing-center/ad/list-by-position?positionCode=AD20230222001`,
				})
        this.imgList = swiperRes.datas	
			},	
      
      async getColList() {
        // 金刚区数据顺序从大到小(后台配置顺序)
				const diamondRes = await this.$request({
					method: 'POST',
					url: `/user-center/banner/appDiamondInfo`,
          data: {
            userId: this.userInfo.id || '',
          }
				})
        this.colList = diamondRes.datas.filter((item)=> {return item.isDisplay !== 0})
			},
			async getGoodsList() {
				const res = await this.$request({
					method: 'GET',
					url: '/product-center/merchantPurchase/new/pageGoodsByDriver',
					data: {
						pageNum: this.page,
						pageSize: this.size,
						userId: this.userInfo.id || ''
					}
				})
				if (res.datas.data.length < this.size) {
					this.status = 'noMore'
				}
				this.lists = this.lists.concat(res.datas.data)
				this.total = res.datas.count
        //当总数据长度为奇数且无更多数据时最后一条数据补位第一条数据
        if(this.total && this.total % 2 !== 0 && this.status === 'noMore') {
          this.lists = this.lists.concat(this.lists[0])
        }
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			handleCity() {
				uni.navigateTo({
					url: '/components/cityIndexList?source=index'
				})
			},
			handleSearch() {
				uni.navigateTo({
					url: '/indexPack/search/search'
				})
			},
			handleImg(img) {
				if (img.jumpType === 1) {
					uni.navigateTo({
						url: `/indexPack/article/article?articleId=${img.articleId}`
					});
				} else {
					return
				}
			},
			handleCar() {
				if (!this.$store.state.user.userInfo.id) { // 未登录
					uni.navigateTo({
						url: '/authPack/login/wxLogin'
					})
				} else {
					if (this.isAuth) { // 已认证
						if (this.isComplete) { // 已完善信息
							uni.navigateTo({
								url: '/minePack/function/myCar'
							});
						} else { // 待完善
							uni.navigateTo({
								url: '/indexPack/car/brand'
							});
							uni.setStorageSync('authSource', 'index')
						}
					} else { // 未认证
						uni.navigateTo({
							url: '/indexPack/car/authenticate'
						});
						uni.setStorageSync('authSource', 'index')
						this.show = false
						this.first = false
					}
				}
			},
			//进入商品详情页面
			goGoodsDetail(code) {
				if (this.userInfo.id) {
					uni.navigateTo({
						url: `/components/goodsDetail?jfcode=${code}`
					});
				} else {
					uni.redirectTo({
						url: '/authPack/login/wxLogin'
					})
				}
			},
			handleFunc(item) {
        let code = item.code.toUpperCase()
				if (code === 'MAINTENANCE') { //做保养
					uni.navigateTo({
						url: `/indexPack/maintenance/index`
					});
				} else if (code === 'INVITATION') {  //邀请有礼
					uni.navigateTo({
						url: `/indexPack/invite/index`
					});
				} else if (code === 'RAFFLE') { //抽奖活动
					uni.navigateTo({
						url: '/minePack/function/raffle/raffle'
					})
				} else if (code === 'PRIZE') { // 我的奖品
					uni.navigateTo({
						url: '/indexPack/prize/prizeList'
					})
				} else if (code === 'yjzx') { //油价资讯
					const url = encodeURIComponent(
						'https://sns.hcbkeji.com/invitation/detail?share=true&id=8387&from=share&backType=sns')
					uni.navigateTo({
						url: `/pages/webview/webview?url=${url}`
					});
				} else if (code === 'PASSCHECK') { //通行证查询
					const url = encodeURIComponent('https://app.hcbkeji.com/onlinetxz/list.html')
					uni.navigateTo({
						url: `/pages/webview/webview?url=${url}`
					});
				}
			},
			handleShop() {
				uni.navigateTo({
					url: '/components/cartList',
					success: () => {
						setTimeout(() => {
							uni.$emit('cartSource', {
								path: '/pages/index/index/index',
								isTabbar: true
							})
						}, 500)
					}
				})
			},
			goVideoPage() {
				uni.navigateTo({
					url: `/videoPack/videoList/index`
				});
			},
			goCareCenter() {
				uni.setStorageSync('careAuth', 'index')
				uni.navigateTo({
					url: `/carePack/index/index?type=index`
				});
			},
			goIntegralDetail() {
				uni.navigateTo({
					url: `/indexPack/integral/shop`
				})
			},
			goCouponDetail() {
				uni.navigateTo({
					url: `/minePack/coupon/index`
				})
			},
			goCardFriends() {
				uni.navigateTo({
					url: `/indexPack/cardFriendsLogs/index`
				})
			},
			goInstallDetail() {
				uni.navigateTo({
					url: `/indexPack/tireInstallDetails/index`
				})
			},
      
      closeAdPopup() {
        this.adShow = false
        if(this.$refs.adVideoRef) {
          this.$refs.adVideoRef.pause() //暂停广告视频播放
        }
      }
      
		},
		// 点击tabBar把当前的下标传入全局
		onTabItemTap(item) {
			this.$store.state.global.tabBarIndex = item.index
		},

	}
</script>

<style lang="scss">
	.width1 {
		width: 192rpx;
	}

	.width2 {
		width: 266rpx;
	}
  image {
    will-change: transform;
  }

	.index {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #f5f5f5;
	}

	.navbar {
		height: 100%;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;

		&-search {
			display: flex;
			align-items: center;
			font-size: 14px;
			padding-right: 20rpx;

			text {
				color: rgba(0, 0, 0, .85);
			}
		}

		&-input {
			width: 60%;

			/deep/ .u-icon__icon {
				font-size: 22px !important;
			}
		}
	}

	.content {
		z-index: 1;
		margin-top: 100px;
		width: 100%;
		overflow: auto;
	}

	.psize-pop-content {
		height: 68vh;
		width: 558rpx;
		position: relative;

		.bg {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.close {
			position: absolute;
			bottom: -65rpx;
			left: 50%;
		}

		.title {
			color: #FFF5D8;
			position: absolute;
			padding: 20rpx;
			left: 0;
			top: 15%;
		}
	}

	.video-pop-content {
    background-color: transparent;
		position: relative;

		.video {
			height: 450rpx;
      margin-bottom: -8rpx;
		}
    .image {
      height: 300px;  
    }

		.close {
			position: absolute;
			bottom: -140rpx;
			left: 50%;
		}
	}

	.coupon-pop-content {
		position: relative;
		padding: 20rpx;
		background: #CF1A1B;
		border-radius: 5rpx;

		.coupon-list-header {
			.title1 {
				color: #fff;
				font-size: 16px;
				font-weight: bold;
				text-align: center;
			}

			.title2 {
				margin-top: 20rpx;
				color: #FFF5D8;
				font-size: 12px;
				text-align: center;
			}
		}

		.list {
			padding: 20rpx 0;
			overflow: hidden;
			max-width: 700rpx;

			.list-item {
				display: flex;
				align-items: center;
				height: 160rpx;

				.item-left {
					border-radius: 5rpx;
					width: 220rpx;
					height: 100%;
					background: #fff;
					border-right: 2rpx solid #CF1A1B;
					line-height: 80rpx;

					.count {
						font-size: 20px;
						font-weight: bold;
						text-align: center;
					}

					.tip {
						font-size: 12px;
						text-align: center;
					}
				}

				.item-right {
					width: 320rpx;
					height: 100%;
					background: #fff;
					border-radius: 5rpx;
					padding-left: 10rpx;
					position: relative;

					.name {
						font-size: 16px;
						font-weight: 400;
						margin-top: 10rpx;
					}

					.title {
						display: flex;
						font-size: 12px;
						margin-top: 10rpx;

						.label {
							margin-right: 10rpx;
							color: #999999;
						}
					}

					.use {
						position: absolute;
						width: 33rpx;
						padding: 6rpx;
						border-radius: 22rpx;
						color: #fff;
						font-size: 12px;
						text-align: center;
						background: #CF1A1B;
						right: 10rpx;
						top: 26rpx;
					}
				}
			}
		}

		.close {
			position: absolute;
			bottom: -65rpx;
			left: 50%;
		}
	}

	.img {
		margin-top: 30rpx;
		height: 150rpx;

		.swiper {
			height: 100%;
		}

		&-src {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.car {
		height: 60px;
		margin: 20rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 20rpx;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba($color: #000000, $alpha: .16);
		background: linear-gradient(180deg, #FFEFF0 0%, #FFFFFF 100%);

    &-image {
      width: 88rpx;
      image {
        width: 100%;
        height: 108rpx;
      }
    }
    
		&-text {
      display: flex;
      flex-direction: column;
      align-items: left;
      flex: 1;
      padding-left: 20rpx;
      
			text {
				&:first-child {
					padding-bottom: 10rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #000000;
				}

				&:last-child {
          font-size: 22rpx;
          font-weight: 400;
          color: #65738B;
				}
			}
		}

		&-button {
			button {
				height: 32px;
				line-height: 64rpx;
				border-radius: 40rpx;
				font-size: 14px;
				background: #CF1A1B;
			}
		}

		&-info {
			display: flex;
			align-items: center;


			image {
				width: 72rpx;
				height: 36px;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			&-num {
				display: flex;
				flex-direction: column;
				font-size: 12px;

				/deep/ .u-tag--mini {
					height: 18px !important;
				}

				&-number {
					display: flex;
					align-items: center;

					/deep/ .u-tag__icon {
						margin-right: 0;

						image {
							margin-right: 4rpx;
						}
					}

					.carnum {
						display: flex;
						height: 18px;
						border-radius: 6rpx;
						margin-right: 20rpx;
						border: 2rpx solid #22D194;

						>view {
							padding: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							&:first-child {
								color: #FFFFFF;
								background-color: #22D194;
							}

							&:last-child {
								color: #22D194;
							}
						}
					}
				}

				&-name {
					line-height: 40rpx;
				}

			}
		}

		&-service {
			width: 225rpx;

			&-text {
				font-size: 12px;
				font-weight: bold;
				color: #000000;
				text-align: right;
				width: 100%;
				display: inline-block;
			}

			.swiper-box {
				height: 90rpx;
			}

			.car-service-time {
				font-size: 11px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: bold;
				color: #65738B;
				margin-top: 4rpx;
				text-align: right;
			}

			.car-service-time-active {
				color: #CF1A1B;
			}
		}
	}

	.card-friends {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx;
		width: calc(100% - 80rpx);
		padding: 20rpx;
		display: flex;

		.card-img {
			image {
				width: 50rpx;
				height: 50rpx;
			}

			padding-right: 20rpx;
			border-right: 2rpx solid #eee;
			margin-right: 20rpx;
		}

		.card-swiper {
			background: linear-gradient(270deg, #FFFFFF 0%, #FEF1F0 100%);
			border-radius: 28rpx;
			display: flex;
			width: calc(100% - 92rpx);
			height: 66rpx;
			display: flex;
			align-items: center;
			align-content: center;

			.swiper-box {
				width: 100%;
				height: 100%;
			}

			.swiper-item-box {
				display: flex;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.msg-info {
					display: flex;
					align-items: center;
					width: calc(100% - 60rpx);
					justify-content: space-between;

					.info {
						padding-left: 20rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						width: calc(100% - 120rpx);
					}

					.time {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						width: 120rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.middle-banner {
		display: flex;
		align-items: center;
		margin: 20rpx;
		width: calc(100% - 40rpx);

		.video-banner {
			width: calc(50% - 10rpx);
			margin-right: 10rpx;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.ky-banner {
			width: calc(50% - 10rpx);
			margin-left: 10rpx;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.coupon-integral {
		display: flex;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx;
		padding: 15rpx 0;
		width: calc(100% - 40rpx);

		.integral-box {
			position: relative;
			margin: 10rpx;
			width: calc(50% - 20rpx);
			height: 160rpx;

			.title {
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				z-index: 1;
				position: relative;
				margin: 26rpx;
				margin-bottom: 16rpx;

				.bd {
					font-size: 20px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F05A5C;
					margin-right: 10rpx;
				}
			}

			.btn {
				width: 116rpx;
				height: 48rpx;
				background: linear-gradient(180deg, #FFB8B7 0%, #FF585A 54%, #FFB8B7 100%);
				border-radius: 24rpx;
				color: #fff;
				line-height: 48rpx;
				text-align: center;
				z-index: 1;
				position: relative;
				font-size: 12px;
				margin-left: 26rpx;
			}
		}

		.coupon-box {
			position: relative;
			margin: 10rpx;
			height: 160rpx;
			width: calc(50% - 20rpx);

			.title {
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				z-index: 1;
				position: relative;
				margin: 26rpx;
				margin-bottom: 16rpx;

				.bd {
					font-size: 20px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FC9924;
					margin-right: 10rpx;
				}
			}

			.btn {
				width: 124rpx;
				height: 48rpx;
				background: linear-gradient(180deg, #FFDFBA 0%, #FC9924 51%, #FFDFB8 100%);
				border-radius: 24rpx;
				color: #fff;
				z-index: 1;
				position: relative;
				line-height: 48rpx;
				text-align: center;
				font-size: 12px;
				margin-left: 26rpx;
			}
		}

		.bg {
			width: 100%;
			height: 100%;
			height: 160rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.func {
		font-size: 14px;
		background: #fff;
		margin: 0 20rpx;
		width: calc(100% - 80rpx);
		padding: 20rpx;
		color: rgba($color: #000000, $alpha: .65);

		.func-swiper-box {
			height: 160rpx;

			.func-swiper-item {
				display: flex;
				align-items: center;
			}

			.func-info {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					margin-top: 10rpx;
					text-align: center;
				}
			}
		}

		image {
			width: 100rpx;
			height: 50px;
		}

	}

	.product {
		height: auto;

		&-divider {
			margin: 0 20rpx;
		}

		&-list {
			column-count: 2;
			column-gap: 20rpx;
			/*格子间距*/
			width: 100%;
			padding: 20px 10px;
			box-sizing: border-box;
		}

		.product-item {
			box-sizing: border-box;
			overflow: hidden;
			background-color: #FFFFFF;
			/*避免在元素内部插入分页符*/
			break-inside: avoid;
			box-sizing: border-box;
			margin-bottom: 10px;
			border-radius: 10rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(#000000, .16);
      
      .product-image {
        position: relative;
        image {
          width: 100%;
        }
        .bage {
          position: absolute;
          width: 48rpx;
          height: 48rpx;
          right: 0;
          top: 0;
        }
        .act {
          position: absolute;
          bottom: 0;
          width: 100%;
          
          .act-wrapper {
            display: flex;
            align-items: flex-end;
            color: #FFFFFF;
            font-size: 22rpx;
			text-shadow: 0 0 0.1px currentColor;
            .act-left {
              height: 60rpx;
              flex: 1.5;
              background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/common_bug_gif_bg.png') no-repeat;
              background-size: cover;
              display: flex;
              align-items: center;
              justify-content: center;
			  border-top-right-radius: 50%;
              .act-left-text {
                color: #FFDA4B;
                font-size: 24rpx;
              }
            }
            .act-right {
              height: 42rpx;
              flex: 4;
              background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/common_bug_gif_bg.png') no-repeat;
              background-size: cover;
              display: flex;
              align-items: center;
			  justify-content: center;
              margin-left: -2%;
              letter-spacing: 2rpx;
              .act-right-text {
                color: #FFD938;
              }
            }
          }
        }
      }
		}

		.product-content-area {
			background: #FFFFFF;
			width: 100%;
			align-items: center;
			overflow: hidden;
			break-inside: avoid;
		}

		.product-info {
			padding: 6rpx 20rpx 0rpx 20rpx
		}

		.product-info-content {
			overflow: hidden;
		}
    
    .product-promotion {
      display: inline;
    }

		.product-info-title {
			font-size: 12px;
			color: rgba(#000000, .85);
			line-height: 36rpx;
			display: -webkit-box;
			overflow: hidden;
			// text-overflow: ellipsis;   
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.product-info-price {
			margin: 20rpx 0;
      
       .price-wrapper {
         display: inline;
       } 
        
      .new-title {
        font-size: 13px;
        color: #EE3B3B;
        margin-right: 8rpx;
      }
			.new {
				font-size: 16px;
				font-weight: bold;
				color: #EE3B3B;
				margin-right: 10rpx;

				.money {
					font-size: 10px;
				}
			}

			.old {
				font-size: 10px;
				color: rgba(#000000, .45);
				line-height: 28rpx;
				text-decoration: line-through;
			}
		}

		.product-info-tag {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			/deep/ .u-tag-wrapper {
				margin: 0 14rpx 14rpx 0;
			}
		}

		.product-info-tagList {
			display: flex;
			flex-wrap: wrap;
			max-height: 68rpx;
      margin: 10rpx 0;
			overflow: hidden;

			.product-info-tagList-item {
				margin: 0 16rpx 8rpx 0;
				padding: 0 4rpx;
				font-size: 22rpx;
				color: #996C00;
				background-color: #FFF8E6;
			}
		}

	}

	.fab {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 70px;
			height: 70px;
		}
	}
</style>